<template>
  <div>
    <van-nav-bar
      title="选择座位"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell-group>
      <van-cell
        :title="activeFilm.filmsName"
        title-style="font-weight:700;"
        :value="activeTime"
      />
    </van-cell-group>
    <div class="movieBtn">
      <div
        class="btn"
        @click="changeTime(index)"
        :class="{ active: index == filmsListActive }"
        v-for="(item, index) in filmsList"
        :key="item._id"
      >
        <div>{{ item.time1 }}</div>
        <div>{{ item.format }}</div>
        <div>￥{{ item.price }}起</div>
      </div>
    </div>
    <div id="icon">
      <div>
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-zuoweianpai" />
        </svg>
        <span>可选</span>
      </div>
      <div>
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-danrenzuoweixuanzuowei1" />
        </svg>
        <span>已选</span>
      </div>
      <div>
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-yishouzuowei" />
        </svg>
        <span>已售</span>
      </div>
      <div>
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-zuowei" />
        </svg>
        <span>线上优先</span>
      </div>
      <div>
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-jinzhi" />
        </svg>
        <span>停售</span>
      </div>
      <div>
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-VIPzuobeifen" />
        </svg>
        <span>W</span>
      </div>
    </div>

<!--   总览显示图   -->
<div class="popover" v-show="popoverShow">
    <main class="small">

      <div class="seatGroup">

        <ul v-for="(item, index) in numberDetail.layout" :key="index">
  
          <li
            v-for="(item2, index2) in item.list"
            :key="index2"
            @click="chooseSeat(index, index2, item2)"
            :class="{ disabled: item2.disabled || item2.seatType == '04' }"
          >


            <svg class="xl-icon" aria-hidden="true" v-if="item2.disabled">
              <use xlink:href="#icon-jinzhi" />
            </svg>

            <svg class="xl-icon" aria-hidden="true" v-else-if="item2.selected">
              <use xlink:href="#icon-danrenzuoweixuanzuowei1" />
            </svg>

            <template v-else>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '01'"
              >
                <use xlink:href="#icon-zuoweianpai" />
              </svg>
              <svg
                class="xl-icon"
                style="color: aqua"
                aria-hidden="true"
                v-if="item2.seatType == '02'"
              >
                <use xlink:href="#icon-zuoweianpai" />
              </svg>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '03'"
              >
                <use xlink:href="#icon-VIPzuobeifen" />
              </svg>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '04'"
                style="opacity: 0"
              >
                <use xlink:href="#icon-VIPzuobeifen" />
              </svg>
            </template>
          </li>
        </ul>

      </div>
    </main>
</div>



<!--    主要内容 -->

    <main>
      <div class="title">
        {{ numberDetail.name }}
        <span v-if="numberDetail.tips">({{ numberDetail.tips }})</span>
      </div>
      <div class="dashed"></div>

      <div class="seatGroup">
        <!-- <div class="indexBar">
     <div>
         1
     </div>
     <div>
         2
     </div>
 </div> -->
        <ul v-for="(item, index) in numberDetail.layout" :key="index">
          <div class="indexBarNumber">
            {{ item.rowNum }}
          </div>
          <li
            v-for="(item2, index2) in item.list"
            :key="index2"
            @click="chooseSeat(index, index2, item2)"
            :class="{ disabled: item2.disabled || item2.seatType == '04'||item2.isBuy  }"
          >
            <!-- 01  普通 
     02线上优先
     03 W
     04  空
     disabled  true  不可选 
     isBuy:1  已选 -->

            <svg class="xl-icon" aria-hidden="true" v-if="item2.disabled">
              <use xlink:href="#icon-jinzhi" />
            </svg>

            <svg class="xl-icon" aria-hidden="true" v-else-if="item2.selected">
              <use xlink:href="#icon-danrenzuoweixuanzuowei1" />
            </svg>
            <svg class="xl-icon" aria-hidden="true" v-else-if="item2.isBuy">
                <use xlink:href="#icon-yishouzuowei" />
            </svg>

            <template v-else>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '01'"
              >
                <use xlink:href="#icon-zuoweianpai" />
              </svg>
              <svg
                class="xl-icon"
                style="color: aqua"
                aria-hidden="true"
                v-if="item2.seatType == '02'"
              >
                <use xlink:href="#icon-zuoweianpai" />
              </svg>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '03'"
              >
                <use xlink:href="#icon-VIPzuobeifen" />
              </svg>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '04'"
                style="opacity: 0"
              >
                <use xlink:href="#icon-VIPzuobeifen" />
              </svg>
            </template>
          </li>
        </ul>
        <div class="selectedSeats">
          <li v-for="(item, index) in selectedSeats">
            <div class="close" @click="del(index)">X</div>
            <div>
              {{ item.seatText }}
            </div>
          </li>
        </div>
      </div>
    </main>
    <div class="fot">
      <div class="left">
        <div>一次最多可选择6个座位</div>
        <div>如果特惠活动名额有限以支付页面为准</div>
      </div>
      <div class="right">￥{{ total }}</div>
    </div>
    <van-button type="primary" size="large" id="btn" @click="submit">{{
      selectedSeats.length == 0 ? "选择座位" : "确定"
    }}</van-button>
  </div>
</template>

<script>
let timer = null;
export default {
  name: "seat",
  data() {
    return {
      filmsList: [],
      filmsListActive: 0,
      numberDetail: {},
      selectedSeats: [], //  选中的座位
      popoverShow:false,//  预览图的显示隐藏
    };
  },
  computed: {
    total() {
      let num = 0;
      this.selectedSeats.forEach((v) => {
        num += v.price - 0;
      });

      return num;
    },
    activeFilm() {
      return this.filmsList[this.filmsListActive];
    },
    activeTime() {
      let { startTime, time1 } = this.activeFilm;
      let date = new Date(startTime);
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${month}月${day}日  ${time1}`;
    },
  },
  created() {
    let { index,  } =this.$route.query;
    // console.log(index, filmsList);
    this.filmsList = JSON.parse(sessionStorage.filmsList);
    this.filmsListActive = index;
    this.getSeats();

    
  },
  methods: {
    //  切换场次
    changeTime(index) {
      this.filmsListActive = index;
      this.getSeats();
    },
    getSeats() {
      let { _id: bookId } = this.activeFilm;
      this.$http
        .post("/book/pub/getDetail", {
          bookId,
        })
        .then((res) => {
          console.log(res);
          //  正常的数据
          if (res.rows.length) {
            this.numberDetail = res.rows[0];
          }
        });
    },
    chooseSeat(index, index2, item) {
      let { seatType, disabled, seatText, cardPrice, price,isBuy } = item;

      if (seatType == "04" || disabled||isBuy) {
        return;
      }

      let isSelected = this.numberDetail.layout[index].list[index2].selected;

      //  如果这个座位已经被选中了
      if (isSelected) {
        let left = this.numberDetail.layout[index].list[index2 - 1];

        let right = this.numberDetail.layout[index].list[index2 + 1];
        if (left && left.selected && right && right.selected) {
          this.$toast("请取消别的座位,不允许在中间取消");
          return;
        }

        //  取消
        let _index = this.selectedSeats.findIndex(
          (v) => v.seatText == seatText
        ); //   当前点击的这个 在选中项里的索引

        this.selectedSeats.splice(_index, 1);
      } else {
        //  选中
        if (this.selectedSeats.length >= 6) {
          this.$toast("最多选6个");
          return;
        }

        //   获取到自己座位的 跳一格的位置

        let left2 = this.numberDetail.layout[index].list[index2 - 2];
        let left = this.numberDetail.layout[index].list[index2 - 1];
        let right2 = this.numberDetail.layout[index].list[index2 + 2];
        let right = this.numberDetail.layout[index].list[index2 + 1];
        if (left2 && left2.selected && !left.selected) {
          this.$toast("不能空位置");
          return;
        }
        if (right2 && right2.selected && !right.selected) {
          this.$toast("不能空位置");
          return;
        }
        //

        this.selectedSeats.push({
          index,
          index2,
          price,
          cardPrice,
          seatText,
        });
      }

      this.numberDetail.layout[index].list[index2].selected = !isSelected;

      this.$forceUpdate();

      this.popoverShow = true;

   clearTimeout(timer);

  //  如果我在800毫秒内一直在操作  
  //  清掉定时器
  //  如果我超过800毫秒 就执行
  // 函数防抖动  

      timer = setTimeout(v=>{
        this.popoverShow = false;
      },800)
    },
    del(i) {
      let { index, index2 } = this.selectedSeats[i]; // 点击的那个数据里
      this.numberDetail.layout[index].list[index2].selected = false;
      this.selectedSeats.splice(i, 1); //  计算属性    大家写的时候 思考一下计算属性的方法
    },
    submit(){
      let token =  this.$root.token
        if(!token){
            this.$toast('请先登录')
            this.$router.push('/login')
            return
        }

        let {selectedSeats,activeFilm} = this;
        if(selectedSeats.length === 0){
            this.$toast('请先选择座位')
            return 
        }


        console.log(selectedSeats)

        //  先告一段落  
        // 去做登录   第二战场  


      let layout =   selectedSeats.map(v=>{
            let {index,index2} = v;
            return `${index}_${index2}`
        }).join(',')

        console.log(layout)
      
        this.$http.post('/book/kh/book',{
          uni_id_token:token,
          bookId:activeFilm._id,
          layout
        })
        .then(res=>{

          console.log(res)

          let {id:orderId} = res;
          let {total} = this;

          let {filmsName} = this.activeFilm;
        
          this.$router.push(`/pay?orderId=${orderId}&money=${total}&goods=${this.numberDetail.name}-${filmsName}电影票${selectedSeats.length}张`)
        
        })

        
    }
  },
};
</script>


<style lang="scss">
.movieBtn {
  display: flex;
  overflow: scroll;
  margin-left: 20px;

  .btn {
    height: 80px;
    margin-right: 10px;
    border: 1px solid #aaa;

    div {
      width: 80px;
      text-align: center;
    }

    div:nth-of-type(1) {
      margin-top: 10px;
      font-size: 14px;
    }

    div:nth-of-type(2) {
      margin-top: 5px;
      font-size: 12px;
      color: #aaa;
    }

    div:nth-of-type(3) {
      margin-top: 5px;
      font-size: 14px;
      color: #fc5869;
    }
  }

  .active {
    background-color: #fc5869;
    border: 1px solid #fc5869;

    div {
      color: #fff !important;
    }
  }
}

#icon {
  margin: 20px 0 10px;
  display: flex;
  justify-content: center;

  div {
    flex: 1;
    text-align: center;

    span {
      padding-left: 5px;
      font-size: 12px;
    }
  }
}

main {
  background-color: #f6f6f6;

  position: relative;
  overflow: scroll;
  padding-bottom: 100px;

  &.small{
   padding: 0;

   .seatGroup{
   background-color: rgba(0,0,0,.3);
     
   }
 
  ul {
  
    li {
      display: inline-block;
      width: 10px;
      line-height:10px;
      text-align: center;
      margin: 1px;
    }
    .xl-icon {
      font-size: 12px;
      color: #666;
    }
  }

  }

  .selectedSeats {
    overflow: scroll;
    padding: 5px;

    li {
      width: 100px;
      margin: 5px;
      height: 40px;
      position: relative;
      border: 1px solid #999;
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      .close {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }



  }

  .seatGroup {
    position: relative;
    padding: 20px ;
  }
  .indexBar {
    width: 20px;
    height: auto;
    padding: 20px 0;
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    background: #888;
    border-radius: 8px;
    div {
      width: 20px;
      text-align: center;
      height: 34px;
    }
  }

  .indexBarNumber {
    text-align: center;
    width: 30px;
    left:-20px;
    top: 0;
    bottom: 0;

    position: absolute;
    background: #888;
  }
  .title {
    width: 180px;
    line-height: 20px;
    position: absolute;
    left: 100px;
    text-align: center;
    font-size: 12px;
    background-color: #dcdcdc;
    border-radius: 0 0 18px 18px;
  }
  .dashed {
    position: absolute;
    left: 210px;
    top: 28px;
    height: 180px;
    border-left: 1px dashed #e1e1e1;
  }
  ul:nth-of-type(1) {
    margin-top: 38px;
  }
  ul {
    white-space: nowrap;
    position: relative;
    li {
      display: inline-block;
      width: 30px;
      line-height: 30px;
      text-align: center;
      margin: 3px;
    }
    .xl-icon {
      font-size: 30px;
      color: #666;
    }
  }
  .disabled {
    pointer-events: none;
  }
  .selected {
    .xl-icon {
      color: #fc5869;
    }
  }
}
.fot {
  position: fixed;
  bottom: 50px;
  display: flex;
  justify-content: center;
  line-height: 20px;
  padding-top: 6px;
  border-top: 1px solid #f6f6f6;
  background: #fff;

  .left {
    padding-left: 20px;
    font-size: 12px;
    color: #aaa;
  }

  .right {
    margin-left: 100px;
    color: #fc5869;
    font-size: 24px;
    line-height: 40px;
  }
}

#btn {
  position: fixed;
  bottom: 0;
  background-color: #fc5869;
  border: 1px solid #fc5869;
  border-radius: 5px;
}

.popover{
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  background: rgba($color: #000000, $alpha: 0.3);
 
}
</style>